<template>
	<view style="padding: 40rpx 32rpx;">
		<text class="title">{{title}}</text>
		<view class="v1">
			<image :src="u_data.img" mode="aspectFill"></image>
			<text class="name">{{u_data.name}}</text>
			<text class="tag" v-for="item in u_data.tag">{{item}}</text>
		</view>
		<view class="v2">
			<text class="time">{{ustime(u_data.time)}}</text>
			<text class="visit">{{u_data.visit}}人阅读</text>
		</view>
		<text class="m_info">{{u_data.info}}</text>
		<view class="img_list">
			<image :src="item" mode="aspectFill" v-for="item in u_data.imglist"></image>
		</view>
		<text class="fenge"></text>
		<view class="titleD">
			<text></text>
			<text>评价</text>
			<text>（{{u_data.commentnum}}条）</text>
		</view>
		
		
		<view class="comment" v-for="item in u_data.comment">
			<image :src="item.img" mode="aspectFill"></image>
			<view class="comain">
				<view>
					<view>
						<text class="name">{{item.name}}</text>
						<text class="cotime">{{ustime(item.time)}}</text>
					</view>
					<view>
						<text class="iconfont like" :class="item.lkeis == 0 ? 'like_new':''">&#xe760;</text>
						<text class="likenum">{{item.like}}</text>
					</view>
				</view>
				<text class="co_info">{{item.info}}</text>
				
				<view class="comment comment2" v-for="item2 in item.list">
					<image :src="item2.img" mode="aspectFill"></image>
					<view class="comain">
						<view>
							<view>
								<text class="name">{{item2.name}}</text>
								<text class="cotime">{{ustime(item2.time)}}</text>
							</view>
							<view>
								<text class="iconfont like" :class="item2.lkeis == 0 ? 'like_new':''">&#xe760;</text>
								<text class="likenum">{{item2.like}}</text>
							</view>
						</view>
						<text class="co_info">{{item2.info}}</text>
						
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view>
				<text class="iconfont">&#xe610;</text>
				<text>{{u_data.like}}</text>
			</view>
			<view>
				<text class="iconfont">&#xe8b6;</text>
				<text>删除</text>
			</view>
			<input type="text" disabled="true" placeholder="说点什么~" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'宝宝记忆力“黄金期”别错过，用这5个方法',
				u_data:{
					img:'https://i04piccdn.sogoucdn.com/2b9af2a65da4d043',
					name:'一只忧郁的阿黄',
					tag:['大脑','记忆力','黄金期'],
					visit:2398,
					time:1637375532,
					info:'5个让孩子记忆力超群的方法（一）让孩子复述回忆，情景还原让回忆保持“新鲜感”的最好方法就是复述，比如孩子放学回家后，在吃饭的时候询问今天老师都讲了什么新知识，今天发生了什么新奇的事情，让孩子情景还原，这样可以加深孩子对事物的记忆。（二）丰富孩子想象力很多孩子喜欢玩“过家家”的游戏，这时候我们家长不要去给孩子太多的建议，让孩子自由发挥想象力。孩子可能会有千奇百怪的想法，但也要给与充分的鼓励，在孩子每一次的“游戏”背后，都是激发想象力的好机会。（三）陪孩子讲故事故事是让孩子认识世界、学习规则的重要方式和途径，但一些传统的童话故事类书籍，对孩子的帮助并不大，家长可以尝试讲一些自己改编的故事。可以根据一些生活中的真人真事来改编，这样能够让孩子有很强的代入感，让孩子更轻松理解。（四）培养孩子理解能力传统的“死记硬背”无法在孩子脑中形成深刻的印象，家长可以把要记忆的内容转化成通俗易懂的语言然后传达给孩子，这样才能让孩子对事物的理解更为深刻，从而提高孩子的记忆能力。（五）陪孩子做游戏对于5岁前的宝宝，家长要在空闲的时间多陪孩子进行亲子游戏，在游戏的过程中不仅可以培养孩子的观察力、专注力，还能让孩子从中学到知识。',
					imglist:['https://img03.sogoucdn.com/app/a/100520093/f9d5c084396d06f6-90e0186edb2b7e85-8d7c4260e0b44177cb0ffd65cf37594e.jpg','https://img03.sogoucdn.com/app/a/100520093/f9d5c084396d06f6-0c7006bf1d0bb8d5-06dd9f7e25887c456df56277c0e4ad55.jpg'],
					commentnum:20,
					like:'1.3k',
					comment:[
						{
							img:'https://img03.sogoucdn.com/app/a/100520093/f9d5c084396d06f6-90e0186edb2b7e85-8d7c4260e0b44177cb0ffd65cf37594e.jpg',
							name:'梓呀紫',
							time:1637375532,
							like:20,
							lkeis:0,//0 点击了喜欢 1 没点击
							info:'这是一个很不错的测试题，测试内容参考了大量文献，有相关科学依据，每一道题都是精心设计的，赞！',
							list:[
								{
									img:'https://i02piccdn.sogoucdn.com/db1be55e7b0ed7db',
									name:'不认识',
									time:1637175532,
									like:2,
									lkeis:0,//0 点击了喜欢 1 没点击
									info:'我也觉得，感觉非常像，有科学依据',
								}
							]
						},
						{
							img:'https://i03piccdn.sogoucdn.com/7e53d05e1b25f4ee',
							name:'小猫与蝴蝶结🎀',
							time:1637375532,
							like:99,
							lkeis:1,//0 点击了喜欢 1 没点击
							info:'这个测试题的题目我觉得文字太多了，理解了半天才知道是什么意思，但是比我之前做的那种小儿科的测试题好多了，还是值得推荐给大家的…',
						}
					]
				}
			}
		},
		onLoad() {
			//plus.navigator.closeSplashscreen()
		},
		methods: {
			
		}
	}
</script>

<style>
	.iconfont{
		font-family: 'iconfont' !important;
	}
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_2951928_m8p3en385w8.ttf?t=1637379127695');
	}
	body,html{
		font-family: PingFangSC-Semibold, PingFang SC;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		height: 120rpx;
		box-shadow: 0px -4px 30px 0px rgba(0, 0, 0, 0.05);
		flex-direction: row;
		align-items: center;
		display: flex;
	}
	.bottom>view{
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.bottom>view>text:nth-child(1){
		font-size: 24px;
		margin-right: 8rpx;
		display: block;
	}
	.bottom>view>text:nth-child(2){
		font-size: 14px;
	}
	.bottom>input{
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		display: flex;
		flex: 1;
		margin: 0 32rpx 0 54rpx;
		padding-left: 32rpx;
		font-size: 14px;
	}
	.co_info{
		opacity: .8;
		font-size: 14px;
	}
	.comment{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0;
		border-bottom: 1rpx solid rgba(0,0,0,.1);
	}
	.comment2{
		border: none;
		align-items: flex-start;
		padding: 40rpx 0 0 !important;
	}
	.comment2>image{
		width: 64rpx !important;
		height: 64rpx !important;
	}
	.comment>image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		margin-right: 16rpx;
	}
	.comain .likenum{
		font-size: 12px;
		opacity: .4;
	}
	.comain .like{
		color: rgba(0,0,0,.4);
		font-size: 18px;
	}
	.comain .like_new{
		color: #F34557;
	}
	.comain{
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.comain>view{
		display: flex;
		align-items: flex-start;
		width: 100%;
		margin-bottom: 16rpx;
	}
	
	.comain>view>view{
		display: flex;
		flex-direction: column;
		
	}
	.comain>view>view:nth-child(2){
		align-items: center;
	}
	.comain>view>view:nth-child(1){
		display: flex;
		flex: 1;
	}
	.comain .name{
		font-size: 16px;
		opacity: .8;
	}
	.comain .cotime{
		opacity: .4;
		font-size: 12px;
		display: block;
		margin-top: 8rpx;
	}
	.title{
		font-size: 20px;
		font-weight: 600;
		line-height: 56rpx;
	}
	.titleD{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 32rpx 0;
	}
	.titleD>text:nth-child(1){
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
		border-radius: 40rpx;
	}
	.titleD>text:nth-child(2){
		font-size: 16px;
		font-weight: 600;
		margin-left: 16rpx;
	}
	.titleD>text:nth-child(3){
		font-size: 14px;
		opacity: .4;
	}
	.fenge{
		height: 20rpx;
		background: #F7F7F7;
		display: block;
		margin-left: -32rpx;
		margin-right: -32rpx;
	}
	.img_list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-bottom: 48rpx;
	}
	.img_list>image{
		width: 334rpx;
		height: 334rpx;
		border-radius: 15rpx;
	}
	.m_info{
		font-size: 16px;
		opacity: .8;
		margin: 56rpx 0 40rpx;
		display: block;
	}
	.v2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}
	.v2>text{
		font-size: 12px;
		opacity: .4;
	}
	.v1{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24rpx;
	}
	.v1>image{
		width: 56rpx;
		height: 56rpx;
		border-radius: 100px;
		margin-right: 16rpx;
	}
	.v1 .name{
		font-size: 14px;
		display: flex;
		flex: 1;
	}
	.tag{
		font-size: 14px;
		border: 3rpx solid #F15F35;
		border-radius: 8rpx;
		padding: 0 10rpx;
		color: #F15F35;
		margin-left: 16rpx;
	}
</style>
